<template>
	<view>
		<view class="">
			<uni-card :is-full="true" :isShadow="false">
				<view class="addr">
					<view class="info">
						<view class="mobile">
							收货人：{{addr.name||''}} {{addr.mobile||''}}
						</view>
						<view class="detail">
							收货地址：{{(addr.proveName+addr.cityName+addr.areaName+addr.addr)||''}}
						</view>
					</view>
				</view>
			</uni-card>
			<uni-card :is-full="true" :isShadow="false" @click="sendPhone">
				<view class="">
					商家电话：<text style="color: #5555ff;">{{shop.phone}}</text>
				</view>
				<view class="">
					订单号：<text>{{order.orderNo}}</text>
				</view>
			</uni-card>
		</view>
		<view class="" style="margin: 10px;color: #ff0000;font-size: 18px;">
			总金额：{{totalPrice}}
		</view>
		<view class="" style="margin-top: 10px;">
			<view class="uni-list">
				<view class="content-box" v-for="(item,index) in goods" :key="item.id">
					<label class="uni-list-cell uni-list-cell-pd">
						<view class="right">
							<view class="img">
								<image :src="item.face" mode=""></image>
							</view>
							<view class="rightg">
								<view class="title">
									{{item.title}}
								</view>
								<view class="spec">
									{{(item.spec+$t.unit(item.specVal))||' '}}
								</view>
								<view class="price">
									<view class="">
										￥{{item.price}}
									</view>
									<view class="">
										X{{ item.number}}
									</view>
								</view>
							</view>
						</view>

					</label>
				</view>
			</view>
		</view>
		<view class="noti">
			<view class="">
				<image src="../../static/tip.png" style="height: 20px;width: 20px;"></image>
			</view>
			<view class="">
				如您购买的商品有任何问题，请直接与购买商家联系，商家会为您处理，让您售后无忧
			</view>
		</view>
		<view class="bottom">
			<view class="butt">
				<button open-type="share" type="warn">发送订单给商家</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: [],
				goodsput: [],
				totalPrice: 0,
				order: {},
				addr: {},
				shop: {}
			};
		},
		onShareAppMessage(res) {
			let user = uni.getStorageSync('user')
			console.log(user)
			console.log(user.name)
			console.log(user.account)
			let title = '顾客' + (user.name || user.account) + '的订单';
			console.log(title)
			return {
				title: (title.length > 22 ? (title.substring(0, 22) + "...") : title),
				path: '/pagesOne/orderDetail/orderDetail?id=' + this.order.id,
			};
		},
		onLoad(options) {
			console.log(options, 'dddd')
			console.log("订单ID"+options.id)
			let id = options.id || '';
			if (!options.id || options.id == 'undefined') {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
			this.getOrderInfo(id)
		},
		onShow() {},
		methods: {
			toAddr() {
				uni.navigateTo({
					url: "/pagesOne/addr/addr?action=select"
				})
			},
			sendPhone() {
				uni.makePhoneCall({
					phoneNumber: this.shop.phone
				});
			},
			getShop(id) {
				this.apis.getShop({
					sid: id
				}).then(res => {
					this.shop = res
				})

			},
			async getOrderInfo(id) {
				let that = this;
				let order = uni.getStorageSync("orderDetail");
				let uid = uni.getStorageSync("uid");
				let shop = uni.getStorageSync("shop");
				if (!order || order.id != id) {
					await this.apis.recordById({
						id: id
					}).then(res => {
						order = res
					}).catch(err => {
						uni.switchTab({
							url: "/pages/index/index"
						})
					})
				}
				console.log("order", order)
				// debugger
				//订单不存在或者(订单用户不等于当前用户或者当前用户不在订单商品商家列表中)
				if (!(order && (order.uid == uid || order.records.map((item) => item.sid).indexOf(shop.id) != -1))) {
					uni.switchTab({
						url: "/pages/index/index"
					})
					return;
				}
				that.order = order;
				that.addr = order.addrInfo ? JSON.parse(order.addrInfo) : {};
				that.goods = order.records;
				that.getShop(order.records[0].sid)
				//商品计算总额
				that.totalPrice = Number(order.records.map(item => {
					that.goodsput.push({
						id: item.id,
						number: item.number
					})
					return item.price * item.number
				}).reduce((n, m) => n + m)).toFixed(2)
			},


		}
	}
</script>

<style lang="scss">
	.uni-card--border {
		border: 0px solid #DCDCDC !important;
		border-bottom: 1px solid #DCDCDC !important;
	}

	.addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}


	.tip {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		background-color: #E6D48C;
		border: 1px solid #E6D48C;
		position: relative;
	}

	.tip:before {
		border: 10px solid transparent;
		border-top-color: #E6D48C;
		position: absolute;
		content: "";
		left: 50%;
		top: 100%;
		margin-left: -10px;
	}

	.tip:after {
		border: 10px solid transparent;
		border-top-color: #E6D48C;
		position: absolute;
		content: "";
		left: 50%;
		top: 100%;
		margin-left: -10px;
		margin-top: -1px;
	}

	.now {
		margin-left: 10px;
		font-weight: bolder;
		color: #917810;
	}

	.other {
		margin-right: 10px;
	}

	.info {
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
		align-items: flex-start;
	}

	.mobile {
		margin: 10px 0px 0px 0px;
	}

	.detail {
		margin: 10px 0px 0px 0px;
	}

	.uni-list-cell {
		display: flex;
		font-size: 16px;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		background-color: #fff;
		flex-direction: row;
	}

	.uni-list-cell-pd {
		padding: 11px 15px;
	}



	.uni-list {
		display: flex;
		background-color: #ffffff;
		position: relative;
		flex-direction: column;
		margin-bottom: 50px;

		.uni-list-cell::after {
			position: absolute;
			z-index: 3;
			right: 0;
			bottom: 0;
			left: 15px;
			height: 1px;
			content: "";
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #c8c7cc;
		}
	}

	.img {
		flex: 1;

		image {
			width: 100px;
			height: 100px;
			margin-right: 5px;
		}
	}

	.right {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.rightg {
		flex: 2;
		display: flex;
		flex-direction: column;
		padding-left: 5px;
		justify-content: space-between;
	}

	.title {
		overflow: hidden;
		height: 20px;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.spec {
		margin: 7px 0px;
		color: #c8c7cc;
	}

	.price {
		font-size: 18px;
		color: #EC0D0D;
		display: flex;
		justify-content: space-between;
	}

	.noti {
		margin: 30px 30px;
		padding: 15px;
		background: rgba(250, 79, 81, 0.22);
		display: flex;
		margin-bottom: 80px;
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0px;
		width: 100%;
		background-color: #ffffff !important;
		z-index: 100000;
		height: 50px;
	}

	.sum {
		color: #EC0D0D;
		font-size: 18px;
		font-weight: 700;
		margin-left: 10px;
	}

	.butt button {
		border-radius: 20px;
		line-height: 33px;
		margin-right: 10px;
	}
</style>
